﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="sign.aspx.cs" Inherits="weixin.crm.sign" %>

<!DOCTYPE html>
<html lang="en" style="overflow: hidden;">
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <title>签到打卡</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link rel="stylesheet" media="screen" href="css/style.css">
    <link rel="stylesheet" type="text/css" href="css/reset.css">
    <link href="css/layui/css/layui.css" rel="stylesheet" />
    <script src="css/jquery-2.1.0.min.js"></script>
    <script src="css/layui/layui.js"></script>
    <script src="css/float.js"></script>
    <%=weixin.api.Jsapi.weixin_helper.WeiXinScript() %>
    <script type="text/javascript">
        var form = null, laytpl = null, layer = null, laydate = null;
        var chooseImg1 = ['album'], chooseImg2 = ['camera'];
        var chooseImg = ['camera'];
        layui.use(['form'], function () {
            form = layui.form;
            form.on('radio(type)', function (data) {
                if (data.value == 2) {
                    //$("#date").show();
                    chooseImg = chooseImg1;
                }
                else {
                    //$("#date").hide();
                    chooseImg = chooseImg2;
                }
            });
            //form.on('checkbox(date)', function (data) {
            //    $("input[type=checkbox]").each(function () {
            //        if ($(this).val()!=data.value) {
            //            $(this).attr("checked", false);
            //        }
            //    });
            //    form.render("checkbox");
            //});
            form.render();
        });

        var localids = null, serverId = null, latlng = null;
        wx.ready(function () {
            wx.getLocation({
                success: function (res) {
                    latlng = res;
                    $.getJSON("api.ashx?Action=getaddr&lat=" + latlng.latitude + "&lng=" + latlng.longitude + "&rnd=" + Math.random(), function (data) {
                        if (data.status == 0) {
                            $("#addr").val(data.result.address || '');
                        }
                    });
                },
                cancel: function (res) {
                    alert('用户拒绝授权获取地理位置');
                }
            });
        });
        $(function () {
            $("#chooseImage").click(function () {
                wx.chooseImage({
                    count: 1, // 默认9
                    sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有
                    sourceType: chooseImg, // 可以指定来源是相册还是相机，默认二者都有
                    success: function (res) {
                        if (res.localIds.length > 0) {
                            $("#chooseImage").attr("src", res.localIds[0]);
                            localids = res.localIds[0];
                            serverId = null;
                        }
                        else {
                            alert("没有找到相关图片");
                        }
                    }
                });
            });
            document.querySelector(".btn-sign").onclick = function () {
                console.log($("input[name=kaoqintype]:checked").val());
                if (latlng == null) {
                    alert("未获取到地理位置信息");
                    return;
                }
                if ($("#remark").val() == "") {
                    alert("请输入签到描述信息");
                    return;
                }
                else if (localids == null) {
                    alert("请先拍摄照片");
                    return;
                }
                if (serverId == null) {
                    wx.uploadImage({
                        localId: localids,
                        isShowProgressTips: 1,
                        success: function (res) {
                            serverId = res.serverId;
                            sign(serverId, $("#remark").val());
                        },
                        fail: function (res) {
                            alert("上传图片失败");
                        }
                    });
                }
                else {
                    sign(serverId, $("#remark").val());
                }
            }
        });
        function sign(serverId, remark) {
            $.ajax({
                url: "api.ashx?rnd=" + Math.random(),
                type: "POST",
                data: {
                    Action: "sign",
                    serverId: serverId,
                    remark: remark,
                    laty: latlng.latitude,
                    latx: latlng.longitude,
                    iskq: $("input[name=kq]:checked").val(),
                    addr: $("#addr").val(),
                    kaoqintype: $("input[name=kaoqintype]:checked").val()
                },
                dataType: "json",
                success: function (data) {
                    if (data.success == true) {
                        alert('打卡成功！');
                        window.location.href = "main.aspx";
                    }
                    else {
                        alert('打卡失败,' + data.info);
                    }
                },
                error: function () {
                    alert('打卡失败！');
                }
            });
        }
        function getdata() {
            var type = $("input[name=kq]:checked").val();
            if (type == 2) {

            }
            else {

            }
        }
    </script>
    <style>
        .item {
            width: 96%;
            margin: 0 auto;
            min-height: 380px;
            max-height: 800px;
            z-index: 9999;
            border-radius: 10px;
            display: block;
            position: absolute;
            left: 2%;
            background-color: #fff;
            padding: 10px;
            box-sizing: border-box;
            top: 3%;
        }

       .layui-form-radio i {
            margin: 0 !important;
            padding: 0 !important;
        }

       .layui-form-radio {
            margin: 0 !important;
            padding: 0 !important;
            width:30%;
        }

            .mtype .layui-form-radio:last-child {
                color: red;
            }
    </style>
</head>
<body style="overflow-x: hidden;overflow-y:auto;">
    <form class="layui-form layui-form-pane">
        <div class="item">
            <p>
                <label style="font-size: 13px; color: red;">*考勤打卡为:在正常上下班时间段内的打卡</label>
            </p>
            <p style="font-size: 16px; margin: 10px 0;" class="mtype">
                <input lay-filter="type" type="radio" onchange="getdata()" value="0" checked="checked" name="kq" title="客户拜访" />&nbsp;
                <input lay-filter="type" type="radio" onchange="getdata()" value="1" name="kq" title="外勤打卡" />&nbsp;
                <input lay-filter="type" type="radio" onchange="getdata()" value="2" name="kq" title="考勤打卡" />
            </p>
            <%--<p id="date" style="display:none;">
                <input lay-filter="date" type="checkbox" value="1" name="kaoqintype" title="早上" />&nbsp;
                <input lay-filter="date" type="checkbox" value="2" name="kaoqintype" title="中午" />&nbsp;
                <input lay-filter="date" type="checkbox" value="3" name="kaoqintype" title="晚上" />
            </p>--%>
            <p>
                <label style="font-size: 16px;">签到描述:</label>
            </p>
            <p>
                <textarea id="remark" style="width: 100%; border: solid 1px #ccc; height: 50px; margin-top: 10px; resize: none; border-radius: 10px; padding: 10px; box-sizing: border-box;" maxlength="100" cols="3" row="3"></textarea>
            </p>
            <p style="text-align: center; margin-top: 10px;">
                <img style="width: 100px; height: auto; max-height: 150px; margin: 0 auto; cursor: pointer;" id="chooseImage" alt="" src="css/upload.png" />
            </p>
            <p style="padding: 0; margin: 0; display: block;">
                <input id="addr" readonly="readonly" style="width: 100%; border: none; height: 22px;" maxlength="300" />
            </p>
            <p>
                <div style="width: 100%; margin-top: 15px;" class="login-button btn-sign">确认签到</div>
                <div onclick="window.location.href='main.aspx';" style="width: 100%; margin-top: 5px; background-color: #ccc;" class="login-button">返回</div>
            </p>
        </div>
    </form>
    <div id="particles-js">
        <div class="sk-rotating-plane"></div>
        <canvas class="particles-js-canvas-el" style="width: 100%; height: 100%;" width="1920" height="917"></canvas>
    </div>
</body>
</html>
